<!-- 入库安排 -->
<template>
    <div class="delivery-warehouseInArrange">
        <div class="common-box">
            <van-form @submit="save">
                <van-cell-group inset>
                    <van-field v-model="formInfo.containerno" label="柜号" readonly />
                    <van-field v-model="formInfo.spckmc" is-link name="spckmc" label="入库仓库" placeholder="请选择" required
                        readonly @click="goSelectWarehouse" :rules="[{ required: true, message: '请选择仓库' }]" />
                    <van-field v-model="formInfo.ssrqid" is-link name="datetimePicker" label="入库日期" placeholder="请选择"
                        required readonly @click="showDatePicker = true"
                        :rules="[{ required: true, message: '请选择入库日期' }]" />
                    <van-field v-model="formInfo.dzbz" rows="4" autosize label="入仓说明" type="textarea"
                        style="border-radius: 12px;" placeholder="请输入入仓说明" show-word-limit />
                </van-cell-group>
                <van-button block class="btn" native-type="submit">保存</van-button>
            </van-form>
            <van-calendar v-model:show="showDatePicker" color="#2386E3" :min-date="new Date(2018, 0, 1)"
                @confirm="dateConfirm" />
        </div>
        <div class="dialog" v-show="showTip">
            <div class="tip-box">
                <img src="@/assets/images/pic_rc.png">
                <div class="text">是否确认保存入仓信息？</div>
                <div class="btn-box">
                    <div class="btn-0 btn-1" @click="toSubmit">保存</div>
                    <div class="btn-0 btn-2" @click="showTip = false">取消</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { Ref } from 'vue'
import router from '@/router'
import { setLocalStorage, getLocalStorage, clearLocalStorageItem } from "@/utils/localStorage";
import { msgSuccess } from '@/utils/message'
import { mallDeliveryInfoInputWarehousingInfo } from '@/api/deliveryManage'
import { formatDate } from '@/utils/util'

const carInfo = getLocalStorage('warehouseInArrangeInfo');
let formInfo: any = reactive({ ...carInfo })
let showDatePicker: Ref<boolean> = ref(false)
let showTip: Ref<boolean> = ref(false)

function save() {
    showTip.value = true;
}

function toSubmit() {
    mallDeliveryInfoInputWarehousingInfo(formInfo).then(() => {
        showTip.value = false;
        msgSuccess('入仓安排成功');
        clearLocalStorageItem('warehouseInArrangeInfo');
        router.go(-1);
    })
}

function dateConfirm(value: string) {
    formInfo.ssrqid = formatDate(value);
    showDatePicker.value = false;
}

function goSelectWarehouse() {
    setLocalStorage('warehouseInArrangeInfo', formInfo);
    router.push({ name: 'DeliverySelectWarehouse', query: formInfo })
}
</script>
<style lang="scss" scoped>
div,
span {
    box-sizing: border-box;
}

.delivery-warehouseInArrange {
    padding: 0 24px 24px 24px;
    width: 100%;
    background-color: #F2F2F2;
    min-height: 100vh;

    .common-box {
        margin: 30px 0;
        background-color: #fff;
        border-radius: 32px;
    }

    .btn {
        width: 700px;
        height: 96px;
        line-height: 96px;
        text-align: center;
        border-radius: 24px;
        color: #FFFFFF;
        background: #2386E3;
        position: fixed;
        bottom: 50px;
    }

    .dialog {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 100;
        width: 100%;
        min-height: 100vh;

        .tip-box {
            padding: 60px 54px;
            position: absolute;
            top: 300px;
            left: 50%;
            transform: translateX(-50%);
            width: 640px;
            height: 660px;
            background: linear-gradient(182deg, #EDF7FF 0%, #FFFFFF 100%);
            border-radius: 32px;
            border: 2px solid #979797;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;

            img {
                width: 520px;
                height: 310px;
            }

            .text {
                font-size: 36px;
                font-weight: 500;
                color: #333333;
            }

            .btn-box {
                width: 100%;
                display: flex;
                justify-content: space-between;

                .btn-0 {
                    width: 256px;
                    height: 96px;
                    line-height: 96px;
                    text-align: center;
                    border-radius: 16px;
                    font-size: 36px;
                }

                .btn-1 {
                    background: #2386E3;
                    color: #FFFFFF;
                }

                .btn-2 {
                    background: #FFFFFF;
                    border: 2px solid #DDDDDD;
                }
            }

        }
    }
}
</style>
